import { useDispatch } from "react-redux";
import useLoadingQuestionData from "../../../hooks/useLoadQuestionData";
import EditCanvas from "./EditCanvas";
import styles from "./index.module.scss";
import { changeSelectedId } from "../../../store/componentsReducer";
import LeftPanel from "./LeftPanel";
import RightPancel from "./RightPancel";
import EditHeader from "./EditHeader";
export default function Edit() {
  const { loading } = useLoadingQuestionData();
  const dispatch = useDispatch();
  function clearSelectedId() {
    dispatch(changeSelectedId(""));
  }
  return (
    <div className={styles.container}>
      <div
        style={{
          backgroundColor: "#fff",
          marginBottom: "16px",
          height: "32px",
        }}
      >
        <EditHeader />
      </div>
      <div className={styles["content-wrapper"]}>
        <div className={styles.content}>
          <div className={styles.left}>
            <LeftPanel />
          </div>
          <div className={styles.main} onClick={clearSelectedId}>
            <div className={styles["canvas-wrapper"]}>
              <div style={{ height: "900px" }}>
                <EditCanvas loading={loading} />
              </div>
            </div>
          </div>
          <div className={styles.right}>
            <RightPancel />
          </div>
        </div>
      </div>
    </div>
  );
}
